<template>
  <div class="shop-cart">
    <header class="page-header">
      <div class="header-content">购物车</div>
      <!-- <span v-if="cartMode === false" class="appeal-record" @click="setCartMode"
        >完成</span
      >
      <span v-if="cartMode === true" class="appeal-record" @click="setCartMode"
        >编辑</span
      > -->
    </header>
    <section class="cart-empty" v-if="!products || products.length === 0">
      <ul class="empty-content">
        <li class="img-cart">
          <svg-icon icon-class="shopping-cart"></svg-icon>
        </li>
        <li class="item-text">
          <p>您的购物车空空的哦~</p>
          <p>去看看心仪的商品吧~</p>
        </li>
        <li class="item-btn">
          <router-link to="/classify" class="hairline-btn" tag="span"
            >立即去购物</router-link
          >
        </li>
      </ul>
    </section>
    <div v-else>
      <section class="order-card">
        <!-- <li class="checkbox-all">
          <div class="store-info">
            <img
              src="../../assets/image/product/store-headerM.png"
              class="header-img"
            />
            <span>景谊百货</span>
          </div>
        </li> -->
        <van-checkbox-group class="order-list" v-model="result">
          <ul v-for="(item, index) in products" :key="index">
            <div class="order-info">
              <li class="check-item">
                <!-- <van-checkbox
                  :key="index"
                  checked-color="#91C95B"
                  :name="item"
                ></van-checkbox> -->
              </li>
              <img :src="item.sproduct.image" />
              <li class="order-detail">
                <ul>
                  <li class="info-one">
                    <span>{{ item.sproduct.name }}</span>
                  </li>
                  <li class="info-two">
                    <span>{{ item.sproduct.desc }}</span>
                  </li>
                </ul>
                <div class="info-count">
                  <span>{{ item.sproduct.price / 100 }}</span>
                  <van-stepper
                    v-model="item.number"
                    @change="goodsNumberChange(item)"
                  />
                </div>
              </li>
              <div class="delete" @click="deleteCart(item)">删除</div>
            </div>
            <div class="order-total">
              <label>合计：</label>
              <span>{{ item.total / 100 }}</span>
            </div>
          </ul>
        </van-checkbox-group>
      </section>
    </div>
    <div v-if="clearCart === false">
      <section v-if="cartMode" class="options-edit">
        <van-submit-bar
          :price="totalPrice"
          button-text="结算"
          @submit="submitSettlement"
        >
          <van-checkbox v-model="checked" checked-color="#91C95B"
            >全选</van-checkbox
          >
        </van-submit-bar>
      </section>
      <section v-else class="options-delete">
        <van-submit-bar button-text="删除" @submit="submitDelete">
          <van-checkbox v-model="checked" checked-color="#91C95B"
            >全选</van-checkbox
          >
        </van-submit-bar>
      </section>
    </div>

    <vue-pickers
      :show="show"
      :columns="columns"
      :defaultData="defaultData"
      :selectData="pickData"
      @cancel="close"
      @confirm="confirmFn"
    ></vue-pickers>
    <tabbar></tabbar>
  </div>
</template>

<script>
import { onMounted, ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  name: "shopCart",
  setup() {
    const app = getCurrentInstance().appContext.app;
    const ctx = app.config.globalProperties;
    const $router = useRouter();
    const $store = useStore();
    const clearCart = ref(false);
    const columns = ref(1);
    const cartMode = ref(true);
    const show = ref(false);
    const checked = ref(false);
    const stepperValue = ref("");
    const products = ref([]);
    const totalPrice = ref(0);

    const close = () => {
      show.value = false;
    };

    const confirmFn = () => {
      show.value = false;
      ctx.$toast.fail({
        message: "正在开发中",
        duration: 2000,
      });
      // ctx.$toast.loading({
      //   mask: true,
      //   duration: 1000, // 持续展示 toast
      //   forbidClick: true, // 禁用背景点击
      //   loadingType: "spinner",
      //   message: "支付中...",
      // });

      // setTimeout(() => {
      //   $router.push("/order/transactionDetails");
      // }, 1300);
    };

    const goodsNumberChange = async (item) => {
      const { number, sproduct } = item;
      const params = {
        goodId: sproduct.skuId,
        number,
      };
      const data = await ctx.$http.post(
        "/s_shop/shopping_cart/setShoppingCart",
        params
      );
      totalPrice.value = 0;
      data.forEach((item) => {
        item.total = item.number * item.sproduct.price;
        totalPrice.value += item.total;
      });
      products.value = data;
    };

    const submitDelete = async () => {
      await ctx.$dialog.confirm({
        message: "确认删除这些商品？",
        confirmButtonColor: "#D8182D",
        cancelButtonColor: "#D8182D",
      });
      clearCart.value = true;
    };

    /**
     * 提交购物车
     * products
     */
    const submitSettlement = async () => {
      const firstGoods = products.value[0];
      const { sproduct, number } = firstGoods;
      const { skuId } = sproduct;
      const params = {
        skuId,
        number,
      };
      const orderId = await ctx.$http.post("/s_shop/order/create", params);
      $router.push("/order/orderDetail?orderNo=" + orderId + "&type=1");
      // show.value = true;
    };

    const setCartMode = () => {
      cartMode.value = !cartMode.value;
    };

    const deleteCart = (item) => {
      ctx.$dialog
        .confirm({
          message: "确认删除该商品？",
          confirmButtonColor: "#D8182D",
          cancelButtonColor: "#D8182D",
        })
        .then(async () => {
          const params = {
            goodId: item.sproduct.skuId,
          };
          const data = await ctx.$http.post(
            "/s_shop/shopping_cart/removeGoods",
            params
          );
          initData();
        });
    };

    /**
     * 初始化购物车
     */
    const initData = async () => {
      const data = await ctx.$http.post(
        "/s_shop/shopping_cart/shoppingCardList",
        {}
      );
      totalPrice.value = 0;
      data.forEach((item) => {
        item.total = item.number * item.sproduct.price;
        totalPrice.value += item.total;
      });
      $store.commit("cart/setCardCount", data.length);
      products.value = data;
    };

    onMounted(() => {
      ctx.$eventBus.$emit("changeTag", 2);
      initData();
    });

    return {
      clearCart,
      columns,
      cartMode, // 购物车的模式，true 是显示出编辑按钮 false 是显示完成按钮,默认是false;
      defaultData: [
        {
          text: "Top-Pay",
          value: "Top-Pay",
        },
      ],
      pickData: {
        data1: [
          {
            text: "Top-Pay",
            value: "Top-Pay",
          },
          {
            text: "支付宝",
            value: "支付宝",
          },
          {
            text: "微信",
            value: "微信",
          },
          {
            text: "银行卡",
            value: "银行卡",
          },
        ],
      },
      show,
      list: ["a"],
      products,
      checked,
      stepperValue,
      result: ["a", "b"],
      close,
      totalPrice,
      confirmFn,
      deleteCart,
      goodsNumberChange,
      submitSettlement,
      submitDelete,
      setCartMode,
    };
  },
};
</script>

<style scoped lang="scss">
.shop-cart {
  padding: 0 16px;
  margin-bottom: 100px;
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    .header-content {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #3a3a3a;
    }
    .appeal-record {
      color: #d8182d;
      font-size: 13px;
    }
  }
  .cart-empty {
    .empty-content {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding-top: 40px;
      padding-bottom: 50px;
      .img-cart {
        margin-bottom: 50px;
        .svg-icon {
          width: 156px;
          height: 161px;
        }
      }
      .item-text {
        color: #3a3a3a;
        font-size: 17px;
      }
      .item-btn {
        margin-top: 18px;
        .hairline-btn {
          width: 150px;
          height: 44px;
          font-size: 17px;
          color: #d8182d;
          border: 1px solid #d8182d;
          padding: 10px 32px;
          border-radius: 4px;
        }
      }
    }
  }
  .options-edit {
    ::v-deep .van-checkbox {
      padding-left: 24px;
      .van-checkbox__label {
        font-size: 13px;
        color: #949497;
      }
    }
    ::v-deep .van-submit-bar {
      .van-submit-bar__bar {
        height: 44px;
        line-height: 44px;
      }
      bottom: 50px;
      .van-submit-bar__text {
        font-size: 17px;
        color: #333333;
      }
    }
    ::v-deep .van-submit-bar__price {
      color: #d8182d;
      font-size: 17px;
      font-weight: 600;
      padding-left: 5px;
    }
  }
  .options-delete {
    ::v-deep .van-checkbox {
      padding-left: 24px;
      float: left;
      .van-checkbox__label {
        font-size: 13px;
        color: #949497;
      }
    }
    ::v-deep .van-submit-bar {
      .van-submit-bar__bar {
        display: flex;
        justify-content: space-between;
        height: 44px;
        line-height: 44px;
      }
      bottom: 50px;
      .van-submit-bar__text {
        font-size: 17px;
        color: #333333;
      }
    }
  }
  ::v-deep .van-button--danger {
    background-color: #d8182d;
    height: 44px;
    line-height: 44px;
    .van-button__text {
      font-size: 18px;
    }
  }
  .order-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
    padding: 10px;
    margin-bottom: 2rem;
    ::v-deep .van-checkbox {
      padding-left: 0;
      .van-checkbox__label {
        font-size: 13px;
        color: #949497;
      }
    }
    .checkbox-all {
      .store-info {
        display: flex;
        justify-content: center;
        align-items: center;
        .header-img {
          width: 24px;
          height: 24px;
        }
        span {
          color: #3a3a3a;
          font-size: 11px;
          padding-left: 4px;
        }
      }
    }
    .order-list {
      .order-info {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 16px;
        display: flex;
        justify-content: flex-start;
        position: relative;
        .delete {
          font-size: 12px;
          color: #949497;
          position: absolute;
          right: 0;
          top: 0;
          padding: 10px;
        }
        .check-item {
          display: flex;
          align-items: center;
        }
        img {
          margin-left: 5px;
          width: 100px;
          height: 100px;
          display: inline-block;
          background-color: #d8182d;
          border-radius: 4px;
        }
        .order-detail {
          width: 55%;
          padding-left: 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .info-one,
          .info-two {
            display: flex;
            padding-top: 4px;
            justify-content: space-between;
            font-size: 13px;
          }
          .info-one {
            color: #3a3a3a;
            padding-bottom: 5px;
            span {
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .info-two {
            color: #949497;
          }
          .info-count {
            color: #d8182d;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
            ::v-deep .van-stepper__input {
              width: 31px;
              height: 22px;
              padding: 0;
              color: #949497;
              font-weight: normal;
              background-color: transparent;
              border: 1px solid #dbdbdb;
            }
            ::v-deep .van-stepper__plus {
              border: 1px solid #dbdbdb;
              background-color: transparent;
              width: 16px;
              height: 22px;
              border-radius: 0;
            }
            ::v-deep .van-stepper__minus {
              border-radius: 0;
              border: 1px solid #dbdbdb;
              background-color: transparent;
              width: 16px;
              height: 22px;
            }
          }
        }
      }
      .order-total {
        color: #949497;
        font-size: 14px;
        text-align: right;
        span {
          font-weight: 600;
        }
      }
    }
  }
}
</style>
